<div class="layui-layout layui-layout-admin" id="febs-layout">
  <div class="layui-header layui-anim febs-anim-down" id="app-header">
    <script type="text/html"
            template
            lay-done="layui.element.render('nav','febs-header')">
      <ul class="layui-nav layui-layout-left" lay-filter="febs-header">
        <li class="layui-nav-item" lay-unselect>
          <a febs-event="flexible" title="侧边伸缩">
            <i class="layui-icon layui-icon-shrink-right"></i>
          </a>
        </li>
        <span class="febs-breadcrumb"></span>
      </ul>
      <ul class="layui-nav layui-layout-right" lay-filter="febs-header">
        <!--资费充值-->
        <li class="layui-nav-item layui-user" id="money" lay-unselect>
          <a title="资费">
            <i class="layui-icon layui-icon-rmb febs-gold"></i>
          </a>
          <dl class="layui-nav-child">
            <dd><a class="layui-nav-child-href" id="user-money">充值中心</a></dd>
            <dd><a class="layui-nav-child-href" id="user-price">资费信息</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-user" id="notice" lay-unselect>
          <a title="消息">
            <i class="layui-icon layui-icon-notice" id="icon">
              <span class="layui-badge-dot" style="display: none;" id="world"></span></i>
          </a>
          <dl class="layui-nav-child">
            <dd><a class="layui-nav-child-href" id="look">查看消息</a></dd>
            <dd><a class="layui-nav-child-href" id="read">确认已读</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item layui-hide-xs" id="fullscreen" lay-unselect>
          <a title="切换全屏">
            <i class="layui-icon layui-icon-screen-full"></i>
          </a>
        </li>
        <li class="layui-nav-item layui-user" lay-unselect>
          <a>
            <img style="width: 1.9rem;margin-right:.5rem;border-radius: 50%"
                 src="{{= ctx + 'febs/images/avatar/' + currentUser.avatar }}" title="头像">
            {{ currentUser.username }}
          </a>
          <dl class="layui-nav-child">
            <dd><a class="layui-nav-child-href" id="user-profile">个人中心</a></dd>
            <dd><a class="layui-nav-child-href" id="password-update">密码修改</a></dd>
            <hr/>
            <dd><a class="layui-nav-child-href" data-th-href="@{logout}">退出登录</a></dd>
          </dl>
        </li>
      </ul>
    </script>
  </div>

  <div class="febs-tabs-hidden">
    <script type="text/html" id="TPL-app-tabsmenu" template>
      {{# if(layui.conf.viewTabs){ }}
      <div class="febs-tabs-wrap">
          <span class="febs-tabs-btn febs-tabs-action febs-tabs-prev" data-type="prev">
              <i class="layui-icon layui-icon-left"></i>
          </span>
        <span class="febs-tabs-btn febs-tabs-action febs-tabs-next" data-type="next">
              <i class="layui-icon layui-icon-right"></i>
          </span>
        <span class="febs-tabs-btn febs-tabs-action febs-tabs-down" data-type="down">
              <i class="layui-icon layui-icon-close"></i>
          </span>
        <ul class="febs-tabs-menu">
          {{# layui.each(layui.view.tab.data,function(i, item){ }}
          <li data-type="page" class="febs-tabs-btn" lay-url="{{item.fileurl}}">
            <i class="febs-tabs-ball"></i>{{ item.title }}<b
                  class="layui-icon layui-icon-close febs-tabs-close"></b>
          </li>
          {{# }) }}
        </ul>
      </div>
      {{# } }}
    </script>
  </div>

  <!-- 侧边菜单 -->
  <div class="layui-side" id="app-sidebar">
    <div class="layui-side-scroll">
      <div class="layui-logo" style="cursor: pointer">
        <img data-th-src="@{febs/images/logo.png}">
        <span style="font-size: 1em;font-weight: bold">旅游网</span>
      </div>
      <script
              type="text/html"
              template
              lay-api="getMenus"
              lay-done="layui.element.render('nav','febs-sidebar');layui.febs.sidebarFocus()">
        <ul class="layui-nav layui-nav-tree" lay-filter="febs-sidebar" lay-shrink="all">
          {{#
          function __createSlidebar(data,index){
          if(!data || data.length == 0) return '';
          var html = '
          <dl class="layui-nav-child">';
            layui.each(data, function(i, child) {
            var left = index == 0 ? 50 : 50 + index * 20;
            var title = child.title;
            if (child.icon) {
            title = '<i class="layui-icon '+child.icon+'"></i>' + child.title
            }
            html += '
            <dd><a style="padding-left:' + left + 'px" target="'+(child.target||'')+'"
                   lay-href="'+ (child.href||'') +'">' + title + '</a>';
              if(child.childs) html += __createSlidebar(child.childs,index+1);
              html += '
            </dd>
            ';
            });
            html = html +'
          </dl>
          ';
          return html;
          }
          layui.each(d.childs, function(i,child){
          }}
          <li class="layui-nav-item">
            <a lay-href="{{child.href||''}}" target="{{child.target||''}}" title="{{child.title}}">
              <i class="layui-icon {{child.icon}}"></i>{{child.title}}
              <!--                            <span class="layui-badge-dot" style="margin: 0 auto;margin-left: 10px"></span>-->
              {{# if(child.notice){ }}
              <span class="layui-badge">{{ child.notice }}</span>
              {{# } }}
            </a>
            {{ __createSlidebar(child.childs,0) }}
          </li>
          {{# }) }}
        </ul>
      </script>
    </div>
  </div>
  <!-- 主体内容 -->
  <div class="layui-body" id="febs-body">
    <div id="messages" style="display:none">
      <div style="position:absolute;right:0;bottom:-100px;width:600px;height:300px">
        <div class="layui-collapse" lay-accordion>
          <div class="layui-colla-item">
            <h2 class="layui-colla-title" style="background-color: #fff7e6"><i
                    class="layui-icon febs-orange" style="margin-right: 10px">&#xe6b2;</i>架存预警消息提醒</h2>
            <div class="layui-colla-content layui-show" style="background-color: white">
              <p style="text-indent: 1em;padding-bottom: 8px">本次需要下架的书籍名单，如下：</p>
              <span style="padding-left: 35px;padding-bottom: 8px;font-weight: bold;font-size: 18px"
                    id="sapMs"></span><br>
              <p>&nbsp;&nbsp;请尽快安排下架哦！
                <i class="layui-icon layui-icon-heart-fill febs-red"></i>
                <i class="layui-icon layui-icon-heart-fill febs-red"></i>
                <i class="layui-icon layui-icon-heart-fill febs-red"></i>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="messagew" style="display:none">
      <div style="position:absolute;right:0;bottom:-100px;width:600px;height:300px">
        <div class="layui-collapse" lay-accordion>
          <div class="layui-colla-item">
            <h2 class="layui-colla-title" style="background-color: #fff7e6"><i
                    class="layui-icon febs-orange" style="margin-right: 10px">&#xe6b2;</i>库存预警消息提醒</h2>
            <div class="layui-colla-content layui-show" style="background-color: white">
              <p style="text-indent: 1em;padding-bottom: 8px">本次需要采购的书籍名单，如下：</p>
              <span style="padding-left: 35px;padding-bottom: 8px;font-weight: bold;font-size: 18px"
                    id="sapMw"></span><br>
              <p>&nbsp;&nbsp;请尽快安排采购哦！
                <i class="layui-icon layui-icon-heart-fill febs-red"></i>
                <i class="layui-icon layui-icon-heart-fill febs-red"></i>
                <i class="layui-icon layui-icon-heart-fill febs-red"></i>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script data-th-inline="javascript" type="text/javascript">
  layui.use(['jquery', 'febs', 'element', 'layer'], function () {
    var $ = layui.jquery,
        $view = $('#febs-layout'),
        element = layui.element,
        layer = layui.layer,
        febs = layui.febs;

    window.noticeShelves = function (data) {
      if (currentUser.username === "shelves") {
        $('#icon').css('color', 'orange');
        $('#notice').css('style', 'none');
        $('#world').css('display', 'inline-block');
        var res = [];
        res.push(data);
        febs.post(ctx + 'notice/' + res, function () {
        });
      }
    };

    window.noticewarehouse = function (data) {
      if (currentUser.username === "warehouse") {
        $('#icon').css('color', 'orange');
        $('#notice').css('style', 'none');
        $('#world').css('display', 'inline-block');
        var res = [];
        res.push(data);
        febs.post(ctx + 'notice/' + res, function () {
        });
      }
    };

    //监听折叠
    element.on('collapse(test)', function (data) {
      layer.msg('展开状态：' + data.show);
    });

    var message = '';

    $view.on('click', '#look', function () {
      if (currentUser.username === "shelves") {
        $.ajax({
          url: ctx + 'notice?messagestatus=1',
          dataType: 'JSON',
          cache: false,
          contentType: "application/json;charset=utf-8",
          success: function (res) {
            var data = res.data;
            for (let dataKey in data) {
              message = data[dataKey].message;
            }
            if (message === '') {
              febs.alert.warn("您的消息夹是空的");
            } else {
              $('#messages').css({display: 'block'});
              $('#sapMs').html(message);
            }
          }
        });
      }
      if (currentUser.username === "buyout"||currentUser.username === 'buyoutmen') {
        $.ajax({
          url: ctx + 'notice?messagestatus=0',
          dataType: 'JSON',
          cache: false,
          contentType: "application/json;charset=utf-8",
          success: function (res) {
            var data = res.data;
            for (let dataKey in data) {
              message = data[dataKey].message;
            }
            if (message === '') {
              febs.alert.warn("您的消息夹是空的");
            } else {
              $('#messagew').css({display: 'block'});
              $('#sapMw').html(message);
            }
          }
        });
      }
      if (currentUser.username === "admin") {
          febs.alert.warn("您的消息夹是空的");
        }
      });

    var clic = 1;/*标记*/
    $view.on('click', '#read', function () {
      if (clic === 1) {
        if (message === null) {
          febs.alert.warn("您没有收到消息！");
        } else {
          read();
        }
        clic++;
      } else {
        febs.alert.warn("请勿重复确认！");
      }
    });

    function read() {
      if (currentUser.username === "shelves") {
        $('#icon').css('color', 'black');
        $('#world').css('display', 'none');
        clearInterval(window.notices);//点击确认，清除提醒
        febs.alert.success("消息已正常通知！");
        var dd = [];
        dd.push(message);
        febs.post(ctx + 'notice/update/' + dd, function () {
        });
      }
      if (currentUser.username === "buyout"||currentUser.username === 'buyoutmen') {
        $('#icon').css('color', 'black');
        $('#world').css('display', 'none');
        clearInterval(window.noticew);//点击确认，清除提醒
        febs.alert.success("消息已正常通知！");
        var dd = [];
        dd.push(message);
        febs.post(ctx + 'notice/update/' + dd, function () {
        });
      }
      if (currentUser.username === "admin") {
        febs.alert.warn("您的消息夹是空的！");
      }
    }

    initTheme();

    $view.find('#user-avatar').attr('src', ctx + "febs/images/avatar/" + currentUser.avatar);

    $view.on('click', '.layui-logo', function () {
      febs.navigate("/index");
    });

    $view.on('click', '#fullscreen', function () {
      var $this = $(this);
      var normalCls = 'layui-icon-screen-full';
      var activeCls = 'layui-icon-screen-restore';
      var ico = $this.find('.layui-icon');

      if (ico.hasClass(normalCls)) {
        var a = document.body;
        a.webkitRequestFullScreen
            ? a.webkitRequestFullScreen()
            : a.mozRequestFullScreen
            ? a.mozRequestFullScreen()
            : a.requestFullScreen && a.requestFullscreen();
        ico.removeClass(normalCls).addClass(activeCls)
      } else {
        var b = document;
        b.webkitCancelFullScreen
            ? b.webkitCancelFullScreen()
            : b.mozCancelFullScreen
            ? b.mozCancelFullScreen()
            : b.cancelFullScreen
                ? b.cancelFullScreen()
                : b.exitFullscreen && b.exitFullscreen();
        ico.removeClass(activeCls).addClass(normalCls)
      }
    });

    $view.on('click', '#password-update', function () {
      febs.modal.view('密码修改', 'password/update', {
        area: $(window).width() <= 750 ? '90%' : '500px',
        btn: ['确定'],
        yes: function () {
          $('#user-password-update').find('#submit').trigger('click');
        }
      });
    });

    function money() {
      if (currentUser.deptId === 1 || currentUser.deptId === 5) {
        return true;
      } else {
        return false;
      }
    }

    $view.on('click', '#user-profile', function () {
      febs.navigate("/user/profile");
    });

    /*资费信息*/
    $view.on('click', '#user-price', function () {
      if (money() !== false) {
        febs.navigate("/user/price");
      } else {
        febs.alert.warn("工作人员办公账号暂无资费信息");
      }
    });

    /*支付界面*/
    $view.on('click', '#user-money', function () {
      if (money() !== false) {
        febs.modal.money('支付界面', 'user/money', {
          area: $(window).width() <= 400 ? ['50%', '50%'] : ['25%', '40%'],
        });
      } else {
        febs.alert.warn("工作人员办公期间禁止充值");
      }
    });

    function initTheme() {
      var theme = currentUser.theme;
      var $sidebar = $('#app-sidebar');
      if (theme === 'black') {
        $sidebar.removeClass('febs-theme-white');
      }
      if (theme === 'white') {
        $sidebar.addClass('febs-theme-white');
      }
    }
  });
</script>